{% extends "base.html" %}

{% block title %}待评价列表 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}待评价列表{% endblock %}

{% block extra_css %}
<style>
    .pending-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-left: 4px solid #ff6b6b;
        transition: all 0.2s ease;
    }

    .pending-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }

    .course-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e9ecef;
    }

    .course-title {
        font-weight: 600;
        color: #333;
        margin: 0;
    }

    .urgent-badge {
        background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.7; }
        100% { opacity: 1; }
    }

    .course-info {
        margin-bottom: 15px;
    }

    .course-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
        font-size: 0.9rem;
        color: #6c757d;
    }

    .course-meta-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .evaluation-status {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 15px;
    }

    .evaluation-status.completed {
        background: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

    .evaluation-status.pending {
        background: #fff3cd;
        border-color: #ffeaa7;
        color: #856404;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    .btn-evaluate {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        border: none;
        color: white;
        font-weight: 500;
        padding: 8px 20px;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

    .btn-evaluate:hover {
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(40,167,69,0.3);
    }

    .quick-evaluate-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-top: 15px;
        border: 1px dashed #dee2e6;
    }

    .quick-rating {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 15px 0;
    }

    .quick-star {
        font-size: 1.5rem;
        color: #dee2e6;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .quick-star:hover,
    .quick-star.active {
        color: #ffc107;
        transform: scale(1.1);
    }

    .alert-info {
        border-left: 4px solid #17a2b8;
        background: #d1ecf1;
        border-color: #bee5eb;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 4rem;
        margin-bottom: 20px;
        opacity: 0.3;
    }

    .empty-state h4 {
        margin-bottom: 15px;
        color: #495057;
    }

    .nav-tabs .nav-link.active {
        background-color: #ff6b6b;
        border-color: #ff6b6b;
        color: white;
    }

    .nav-tabs .nav-link {
        color: #ff6b6b;
    }

    .stats-summary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 30px;
        text-align: center;
    }

    .stats-number {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .stats-label {
        opacity: 0.9;
    }

    .time-remaining {
        font-size: 0.8rem;
        color: #dc3545;
        margin-top: 5px;
    }

    .course-completed-time {
        font-size: 0.85rem;
        color: #6c757d;
        font-style: italic;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 导航标签 -->
    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for('evaluations.index') }}">全部评价</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="{{ url_for('evaluations.pending') }}">待评价</a>
        </li>
    </ul>

    <!-- 统计摘要 -->
    {% if pending_evaluations %}
    <div class="stats-summary">
        <div class="stats-number">{{ pending_evaluations|length }}</div>
        <div class="stats-label">个课程待评价</div>
        <div style="margin-top: 10px; font-size: 0.9rem;">完成评价可帮助提升服务质量</div>
    </div>
    {% endif %}

    <!-- 提示信息 -->
    {% if pending_evaluations %}
    <div class="alert alert-info" role="alert">
        <h6><i class="fas fa-info-circle"></i> 评价提醒</h6>
        <ul class="mb-0">
            <li>请及时对已完成的课程进行评价</li>
            <li>评价提交后24小时内可以修改</li>
            <li>您的评价将帮助改善教学质量</li>
            {% if user_type == 'student' %}
                <li>可以评价教练的专业水平、教学方法等</li>
            {% else %}
                <li>可以评价学员的学习态度、配合程度等</li>
            {% endif %}
        </ul>
    </div>
    {% endif %}

    <!-- 待评价列表 -->
    {% if pending_evaluations %}
        {% for item in pending_evaluations %}
        {% set reservation = item.reservation %}
        {% set evaluation = item.evaluation %}

        <div class="pending-card" data-reservation-id="{{ reservation.id }}">
            <div class="course-header">
                <h5 class="course-title">
                    {% if user_type == 'student' %}
                        与教练 {{ reservation.coach.real_name or reservation.coach.username }} 的课程
                    {% else %}
                        与学员 {{ reservation.student.real_name or reservation.student.username }} 的课程
                    {% endif %}
                </h5>

                {# 暂时移除日期计算，避免moment未定义错误 #}
                {% set days_since = 0 %}
                {% if days_since > 7 %}
                    <span class="urgent-badge">急需评价</span>
                {% elif days_since > 3 %}
                    <span class="badge bg-warning">请及时评价</span>
                {% endif %}
            </div>

            <div class="course-info">
                <div class="course-meta">
                    <div class="course-meta-item">
                        <i class="fas fa-calendar"></i>
                        {{ reservation.reservation_date.strftime('%Y年%m月%d日') }}
                    </div>
                    <div class="course-meta-item">
                        <i class="fas fa-clock"></i>
                        {{ reservation.start_time.strftime('%H:%M') }} - {{ reservation.end_time.strftime('%H:%M') }}
                    </div>
                    <div class="course-meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        {{ reservation.table.name if reservation.table else '未知球台' }}
                    </div>
                    {% if reservation.price %}
                    <div class="course-meta-item">
                        <i class="fas fa-yen-sign"></i>
                        ¥{{ "%.2f"|format(reservation.price) }}
                    </div>
                    {% endif %}
                </div>

                <div class="course-completed-time">
                    课程完成时间：{{ reservation.updated_at.strftime('%Y年%m月%d日 %H:%M') if reservation.updated_at else '未知' }}
                </div>
            </div>

            <!-- 评价状态 -->
            {% if evaluation %}
                {% if user_type == 'student' and evaluation.coach_rating %}
                    <div class="evaluation-status completed">
                        <i class="fas fa-check-circle"></i>
                        <strong>教练已评价：</strong>
                        {% for i in range(evaluation.coach_rating) %}★{% endfor %}
                        {% for i in range(5 - evaluation.coach_rating) %}☆{% endfor %}
                        ({{ evaluation.coach_rating }}/5)
                        {% if evaluation.coach_comment %}
                            <div class="mt-2 font-italic">"{{ evaluation.coach_comment[:50] }}{% if evaluation.coach_comment|length > 50 %}..."{% endif %}</div>
                        {% endif %}
                    </div>
                {% elif user_type == 'coach' and evaluation.student_rating %}
                    <div class="evaluation-status completed">
                        <i class="fas fa-check-circle"></i>
                        <strong>学员已评价：</strong>
                        {% for i in range(evaluation.student_rating) %}★{% endfor %}
                        {% for i in range(5 - evaluation.student_rating) %}☆{% endfor %}
                        ({{ evaluation.student_rating }}/5)
                        {% if evaluation.student_comment %}
                            <div class="mt-2 font-italic">"{{ evaluation.student_comment[:50] }}{% if evaluation.student_comment|length > 50 %}..."{% endif %}</div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endif %}

            <div class="evaluation-status pending">
                <i class="fas fa-star"></i>
                <strong>
                    {% if user_type == 'student' %}
                        请评价教练的表现
                    {% else %}
                        请评价学员的学习情况
                    {% endif %}
                </strong>
                {% if days_since > 0 %}
                    <div class="time-remaining">课程已完成 {{ days_since }} 天</div>
                {% endif %}
            </div>

            <!-- 快速评价区域 -->
            <div class="quick-evaluate-section">
                <h6><i class="fas fa-zap"></i> 快速评价</h6>
                <form class="quick-evaluate-form" data-reservation-id="{{ reservation.id }}">
                    <div class="quick-rating">
                        {% for i in range(1, 6) %}
                            <span class="quick-star" data-rating="{{ i }}">★</span>
                        {% endfor %}
                    </div>
                    <input type="hidden" name="rating" class="quick-rating-input">
                    <input type="hidden" name="reservation_id" value="{{ reservation.id }}">
                    <input type="hidden" name="evaluator_type" value="{{ user_type }}">

                    <div class="mb-3">
                        <textarea name="comment" class="form-control form-control-sm"
                                rows="2" placeholder="简要评价（可选）..."></textarea>
                    </div>

                    <div class="d-flex justify-content-between">
                        <button type="submit" class="btn btn-success btn-sm" disabled>
                            <i class="fas fa-paper-plane"></i> 快速提交
                        </button>
                        <a href="{{ url_for('evaluations.create', reservation_id=reservation.id) }}"
                           class="btn btn-primary btn-sm">
                            <i class="fas fa-edit"></i> 详细评价
                        </a>
                    </div>
                </form>
            </div>

            <!-- 传统操作按钮 -->
            <div class="action-buttons">
                <a href="{{ url_for('evaluations.create', reservation_id=reservation.id) }}"
                   class="btn btn-evaluate">
                    <i class="fas fa-star"></i> 立即评价
                </a>

                {% if evaluation %}
                <a href="{{ url_for('evaluations.detail', evaluation_id=evaluation.id) }}"
                   class="btn btn-outline-info btn-sm">
                    <i class="fas fa-eye"></i> 查看详情
                </a>
                {% endif %}
            </div>
        </div>
        {% endfor %}

    {% else %}
        <!-- 空状态 -->
        <div class="empty-state">
            <i class="fas fa-check-circle"></i>
            <h4>太棒了！没有待评价的课程</h4>
            <p>您已完成所有课程的评价，继续保持！</p>
            <div class="mt-4">
                <a href="{{ url_for('evaluations.index') }}" class="btn btn-primary me-3">
                    <i class="fas fa-list"></i> 查看我的评价
                </a>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 快速评价星级选择
    $('.quick-star').click(function() {
        const rating = $(this).data('rating');
        const container = $(this).closest('.quick-rating');
        const form = $(this).closest('.quick-evaluate-form');

        // 更新星级显示
        container.find('.quick-star').each(function(index) {
            if (index < rating) {
                $(this).addClass('active');
            } else {
                $(this).removeClass('active');
            }
        });

        // 更新隐藏输入
        form.find('.quick-rating-input').val(rating);

        // 启用提交按钮
        form.find('button[type="submit"]').prop('disabled', false);
    });

    // 快速评价提交
    $('.quick-evaluate-form').submit(function(e) {
        e.preventDefault();

        const form = $(this);
        const submitBtn = form.find('button[type="submit"]');
        const originalText = submitBtn.html();

        // 获取表单数据
        const formData = {
            reservation_id: form.find('input[name="reservation_id"]').val(),
            rating: form.find('input[name="rating"]').val(),
            comment: form.find('textarea[name="comment"]').val(),
            evaluator_type: form.find('input[name="evaluator_type"]').val(),
            csrf_token: $('meta[name=csrf-token]').attr('content')
        };

        // 验证必填字段
        if (!formData.rating) {
            alert('请选择评分');
            return;
        }

        // 提交状态
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 提交中...');

        // AJAX提交
        $.ajax({
            url: '{{ url_for("evaluations.quick_evaluate") }}',
            method: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // 成功提示
                    const card = form.closest('.pending-card');
                    card.fadeOut(500, function() {
                        $(this).remove();

                        // 检查是否还有待评价项目
                        if ($('.pending-card').length === 0) {
                            location.reload();
                        }
                    });

                    // 显示成功消息
                    showMessage('评价提交成功！', 'success');

                } else {
                    showMessage(response.message || '评价提交失败', 'error');
                    submitBtn.prop('disabled', false).html(originalText);
                }
            },
            error: function(xhr, status, error) {
                console.error('提交失败:', error);
                showMessage('网络错误，请稍后重试', 'error');
                submitBtn.prop('disabled', false).html(originalText);
            }
        });
    });

    // 消息显示函数
    function showMessage(message, type) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';

        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                <i class="fas ${iconClass}"></i> ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;

        $('body').append(alertHtml);

        // 3秒后自动消失
        setTimeout(function() {
            $('.alert').alert('close');
        }, 3000);
    }

    // 星级悬停效果
    $('.quick-star').hover(
        function() {
            const rating = $(this).data('rating');
            const container = $(this).closest('.quick-rating');

            container.find('.quick-star').each(function(index) {
                if (index < rating) {
                    $(this).css('color', '#ffc107');
                } else {
                    $(this).css('color', '#dee2e6');
                }
            });
        },
        function() {
            const container = $(this).closest('.quick-rating');
            const currentRating = container.closest('form').find('.quick-rating-input').val();

            container.find('.quick-star').each(function(index) {
                if (currentRating && index < currentRating) {
                    $(this).css('color', '#ffc107');
                } else {
                    $(this).css('color', '#dee2e6');
                }
            });
        }
    );

    // CSRF令牌设置
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", $('meta[name=csrf-token]').attr('content'));
            }
        }
    });
});
</script>
{% endblock %}